<template>
    <x-form :schema="schema" :model="model" :options="options" :event="event" @submit="onSubmit" ref="form"></x-form>
</template>

<script>
export default {
  name: 'Field',
  data () {
    return {
      schema: [
        {
          type: 'input',
          inputType: 'text',
          name: 'text',
          label: 'Input Text',
          placeholder: 'input text',
          disabled: false,
          readonly: false
        },
        {
          type: 'input',
          inputType: 'email',
          size: 'sm',
          name: 'email',
          label: 'Email',
          placeholder: 'pealse input valid email',
          disabled: false,
          readonly: false,
          required: true
        },
        {
          type: 'input',
          inputType: 'url',
          name: 'url',
          label: 'Input Url',
          placeholder: 'input url',
          disabled: false,
          readonly: false
        },
        {
          type: 'input',
          inputType: 'password',
          name: 'password',
          label: 'Password',
          disabled: false,
          readonly: false,
          required: true,
          pattern: /\d+/g
        },
        {
          type: 'textarea',
          name: 'textarea',
          label: 'Textarea',
          rows: '5',
          disabled: false,
          readonly: false,
          required: true
        },
        {
          type: 'static',
          inputType: 'static',
          name: 'static',
          label: 'static',
          disabled: false,
          readonly: false,
          required: false
        },
        {
          type: 'select',
          name: 'select',
          label: 'Select',
          defaultValue: '',
          placeholder: 'please select',
          disabled: false,
          readonly: false,
          required: true,
          multiple: false,
          options: ['java', 'c', 'c++']
        },
        {
          type: 'checkbox',
          name: 'radio',
          inputType: 'radio',
          label: 'radio inline',
          disabled: false,
          readonly: false,
          required: true,
          inline: true,
          options: ['radio1', 'radio2', 'radio3']
        },
        {
          type: 'checkbox',
          name: 'checkbox',
          inputType: 'checkbox',
          label: 'checkbox',
          disabled: false,
          readonly: false,
          required: true,
          inline: false,
          options: ['checkbox1', 'checkbox2', 'checkbox3']
        },
        {
          type: 'input',
          name: 'submit',
          inputType: 'submit',
          className: 'btn btn-primary',
          disabled: false,
          readonly: false
        },
        {
          type: 'button',
          name: 'button',
          text: 'Block  default button',
          inputType: 'button',
          size: 'block',
          buttonType: 'default',
          disabled: false,
          readonly: false
        },
        {
          type: 'button',
          name: 'button',
          text: 'Block  info button',
          inputType: 'button',
          size: 'block',
          buttonType: 'info',
          disabled: false,
          readonly: false
        },
        {
          type: 'button',
          name: 'button',
          text: 'Block  default button',
          inputType: 'button',
          size: 'block',
          buttonType: 'warning',
          disabled: false,
          readonly: false
        },
        {
          type: 'button',
          name: 'button',
          text: 'Block  danger button',
          inputType: 'button',
          size: 'block',
          buttonType: 'danger',
          disabled: false,
          readonly: false
        }
      ],
      model: {
        text: '',
        url: 'https://www.google.com',
        static: 'static text',
        email: 'examle@email.com',
        password: 'aaa',
        textarea: 'text text text\ntext new line',
        select: '',
        radio: 'radio3',
        checkbox: ['checkbox1', 'checkbox2'],
        submit: 'Submit'
      },
      options: {
        type: 'vertical',
        novalidate: true,
        tagName: 'form'
      }
    }
  },
  methods: {
    event (e, name) {
      var field = this.$refs.form.getField(name)      
    },
    onSubmit () {
      console.log(arguments)
    }
  }
}
</script>

<style>

</style>
